<!DOCTYPE html>
<html lang="en">
<!-- 预览多图 -->

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <title>使用viewerjQ插件</title>
    <link rel="stylesheet" href="./viewer.min.css">
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #000;
        }

        .container {
            width: 100%;
            display: flex;
            justify-content: center;
            cursor: pointer;
        }

        .container:hover img {
            opacity: 0.1;
        }

        .container img {
            max-width: 350px;
            transform-origin: center;
            transform: perspective(800px) rotateY(20deg);
            transition: 0.5s;
            -webkit-box-reflect: below 1px linear-gradient(180deg, transparent 10%, #000 100%);
            margin: 0 10px;
        }

        /* 
            -webkit-box-reflect: below 1px linear-gradient(180deg, transparent, #000 100%);

            1` -webkit-box-reflect: 倒影
            2` below: 指定倒影在对象的下边
            3` 1px: 间隙
            4` linear-gradient(180deg, transparent, #000 100%); 渐变色
            


            linear-gradient(180deg, transparent, #000 100%) 

            1` 180deg: 用角度值指定渐变的方向（或角度） to left
            2` transparent 10%: 开始颜色 开始位置
            3` #000 100%: 结束颜色 结束位置
            */
        .container img:hover {
            transform: perspective(800px) rotateY(0);
            opacity: 1;
        }
    </style>
</head>

<body>

    <div class="container">
        <img src="https://56hy-1302659776.cos.ap-guangzhou.myqcloud.com/5fd1f0b760970.jpg" alt="">
        <img src="https://56hy-1302659776.cos.ap-guangzhou.myqcloud.com/5fd1f0b7a0c75.jpg" alt="">
        <img src="https://56hy-1302659776.cos.ap-guangzhou.myqcloud.com/5fd7121bc7876.jpg" alt="">
        <img src="https://56hy-1302659776.cos.ap-guangzhou.myqcloud.com/5fd7121d2ad04.jpg" alt="">
    </div>

</body>
<!-- 图片预览 多图集合 -->
<script src="../jq/jquery-3.5.1.min.js"></script>
<script src="./viewer.min.js"></script>

<script>
    $(function () {
        $('.container').viewer();
    })
</script>

</html>